{extend name="public/home"/}
{block name="body"}
<div id="app">
  <van-nav-bar   >
    <span slot="title" @click="titleClick" ><span style="height: 1em;vertical-align: middle;color:#f96868;font-weight: bold;"> {{ deliveryTime }}</span> <span style="font-size:12px;"> {{ address }}</span> <van-icon name="location"  /></span>
    <van-icon name="search" slot="right" />
  </van-nav-bar>
  <van-notice-bar mode="link"  @click="noticeClick">
  {{ noteceText }}
  </van-notice-bar>
  <div ></div>
  <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image" />
      </van-swipe-item>
  </van-swipe>
<div id="container"></div>
  <div id="infoDiv"></div>
  <van-popup v-model="popupshow" position="bottom">
    <van-picker
      show-toolbar
      title="选择区域"
      :columns="columns"
      @cancel="onCancel"
      @confirm="onConfirm"
    />
  </van-popup>

</div>
{/block}
{block name="script"}

<script>

    Vue.use(VueLazyload)
    new Vue({
      el: '#app',
      data() {
         return {
           images: [
             'https://j-image.missfresh.cn/img_20180617165909858.jpg?iopcmd=thumbnail&type=4&width=640',
             'https://j-image.missfresh.cn/img_20180517161622350.jpg?iopcmd=thumbnail&type=4&width=640'
           ],
           noteceText: '足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。',
           popupshow: false,
          columns: ['观山湖区', '白云区', '南明区', '云岩区', '乌当区','其他地区'],
          address: '观山湖区',
          deliveryTime: '当日送达'
         }
       },
       created: function () {
         var center = new qq.maps.LatLng(39.916527, 116.397128);
         map = new qq.maps.Map(document.getElementById('container'), {
             center:center,
             zoomLevel:13
         });
         var searchService = new qq.maps.SearchService({
            panel:document.getElementById('infoDiv'),
            map : map
        });
        searchService.setLocation('北京');
        searchService.search('酒店');
        searchService.setComplete(function(el){
          console.log(el.detail.pois);
        })

       },
       methods: {
         noticeClick: function(){
          this.alert(this.noteceText)
        },
        titleClick: function(){
          this.popupshow = true
        },
        onConfirm: function(value, index){
          if(index == 5){
              this.deliveryTime = '顺丰包邮'

          }else if (index != 0) {
            this.deliveryTime = '次日送达'
          }else{
            this.deliveryTime = '当日送达'
          }


          this.address = value
          this.popupshow = false
        },
        onCancel: function(){
          this.popupshow = false
        },
        alert: function(text){
          this.$dialog.alert({
           message: text
         })
        }
       }
    });

</script>
<style>
.van-swipe img {
    width: 100%;
    height: 200px;
    display: block;
}

</style>
{/block}
